<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Counter-Increment - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">counter-increment</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b>
    [<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]<br></td>
    <td align=center><b class="alert">Other Generated<br>Content Properties</b><br></td>
</tr>
<tr>
    <td valign=top align=center><a href="content.htm">content</a><br>
    <a href="quotes.htm">quotes</a><br>
    <a href="counterreset.htm">counter-reset</a><br>
    <a href="incsource.htm">include-source</a><br></td>
</tr>
<tr><td align=center colspan=2>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0>
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td><b class="alert">none</b></td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>All</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS2/generate.html#counters">CSS2: Sect. 12.5</a>,
        <a href="http://www.w3.org/TR/CSS21/generate.html#counters">CSS2.1: Sect 12.4</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>The 'counter-increment' property acts like an incremented
        variable in a programming language - it specifies the amount to
        increment the specified counter by when the current CSS selector
        is encountered. The property lists one or more counter labels, each
        followed by an optional increment integer value (default increment
        is 1.) Negative integers and zero are also valid.
        <br><br>

        If a counter is incremented AND rendered using a single CSS selector
        (with the 'content' property and 'before:'/'after:' pseudo-elements),
        it should be incremented first, then rendered. If a single CSS selector
        both increments and resets a counter, it is reset, then incremented.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">none</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Suppresses incrementing counters for the current selector.</dd>

<dt><b class="subheading">[identifier integer]</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">O4</i></b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Syntax:</b> ([identifier] [integer]? )+
    <dd><b class="l3heading">Description:</b><br>
        Specifies one or more counters and the amount to increment the counter by.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc:<br>
        <b class="selector">h1:before</b> {<br>
        <span class="property">counter-increment:</span> main-heading;<br>
        <span class="property">counter-reset:</span> sub-heading;<br>
        <span class="property">content:</span> "Section " counter(main-heading) ":" }</div>
    <dd><div class="example">In-Line: NA</div>
</dl>

<big><b class="mainheading">Notes</b></big>
<ul>
    <li>An element whose 'display' property is set to "none" <em>should not</em>
        increment the counter.
    <li>An element whose 'visibility' property is set to "hidden" <em>should</em>
        increment the counter.
</ul>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li>Nothing to report.
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>